<template>
  <div class="home">
    <el-container class="container">
      <el-header style="background: rgb(59, 169, 224); display: flex;justify-content: space-between; ">
        <h3>疫苗管理系统</h3>
        <div style="display: flex;  ">
          <p>管理员</p>
          <el-button type="danger " style="margin: 8px; " @click="quit">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside style="background: rgb(177, 233, 221);width: 180px;">
          <!-- 菜单 -->
          <el-menu class="el-menu-vertical-demo" background-color="#00F5FF" :default-active="toMemu"
            @select="menuClick">
            <el-menu-item index="/Home/ym_management">
              <span slot="title">疫苗管理</span>
            </el-menu-item>
            <el-menu-item index="/Home/ym_storehouse">
              <span slot="title">仓库管理</span>
            </el-menu-item>
            <el-menu-item index="/Home/ym_appointment">
              <span slot="title">疫苗预约</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>

            <router-view></router-view>
          </el-main>
          <el-footer></el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  export default {
    components: {},
    data() {
      return {
        toMemu: undefined,
      };
    },
    methods: {
      quit() {
        this.$router.push("/login");
      },
      menuClick(index, indexPath) {
        this.$router.push(index);
        sessionStorage.setItem("index", index);
      },
    },
    mounted() {
      this.toMemu = sessionStorage.getItem("index") ?
        sessionStorage.getItem("index") :
        "/Home/ym_management";
    }
  };

</script>
<style lang="less" scoped>
  .home {
    height: 100%;
  }

  .container {
    height: 100%;

  }

</style>
